"use client"

import Providers from "@/lib/Providers"
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogOverlay,
    DialogPortal,
    DialogTitle
} from "@radix-ui/react-dialog"
// import { render as reactRender, unmount as reactUnmount } from 'rc-util/lib/React/render';
import { Cross2Icon } from "@radix-ui/react-icons"
import { Theme } from "@radix-ui/themes"
import React, { useCallback, useMemo, useState } from "react"

export type UiModalEventProps = {
    onCancel?: () => any,
    onFinish?: () => Promise<boolean> | boolean | void,
    title?: React.ReactNode,
    description?: React.ReactNode,
    okText?: string
}
export type UiModalProps = React.PropsWithChildren<{
    open?: boolean,
    width?: number,
    loading?: boolean
} & UiModalEventProps>
const UiModal = ({
    open,
    onCancel = () => { },
    onFinish,
    title = " ",
    description,
    children,
    okText = "ok",
    width = 450,
    loading = false
}: UiModalProps) => {
    const [finishLoading, setFinishLoading] = useState(false);
    const onClick = useCallback(async () => {
        if (!onFinish) return onCancel();
        setFinishLoading(true);
        const result = onFinish();
        let isCancel = result;
        if (typeof result == "object") {
            isCancel = await result.catch(() => false);
        }
        setFinishLoading(false);
    }, []);
    const cursor = useMemo(() => loading ? "cursor-wait" : "cursor-pointer", [loading])
    return (
        <Dialog open={open}>
            <DialogPortal>
                <DialogOverlay onClick={onCancel} className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
                <DialogContent style={{ width: width }} className={`data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none`}>
                    {<DialogTitle className="text-mauve12 m-0 text-[17px] font-medium">
                        {title}
                    </DialogTitle>}
                    {!!description && <DialogDescription className="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
                        {description}
                    </DialogDescription>}
                    <Providers attribute="light" appearance="light">
                        {children}
                    </Providers>
                    {!!okText && (
                        <div className="mt-[25px] flex justify-end">
                            <DialogClose asChild onClick={onClick}>
                                <button disabled={loading || finishLoading} className={`${cursor} bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none`}>
                                    {okText}
                                    {(!!loading || finishLoading) && (
                                        <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    )}
                                </button>
                            </DialogClose>
                        </div>
                    )}
                    <DialogClose asChild>
                        <button
                            className="text-violet11 cursor-pointer hover:bg-violet4 focus:shadow-violet7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
                            aria-label="Close"
                            onClick={onCancel}
                        >
                            <Cross2Icon />
                        </button>
                    </DialogClose>
                </DialogContent>
            </DialogPortal>
        </Dialog >
    )
}
export default UiModal